<template>
  <div class="sidebar">
    <div class="sidebar_top">
      <div class="get" @click="toList()"></div>
      <div class="write" @click="toWrite()"></div>
    </div>
    <ul class="list">
      <li><router-link to="/get">收件箱</router-link></li>
      <li><router-link to="/send">已发送</router-link></li>
      <li><router-link to="/drafts">草稿箱</router-link></li>
      <li><router-link to="/recycle">回收站</router-link></li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {

    }
  },
  methods: {
    toWrite() {
      console.log('1111')
      this.$router.push('/write/empty')
    },
    toList() {
      this.$router.push('/get')
    }
  }
}
</script>

<style scoped>
.sidebar {
  position: absolute;
  left: 0;
  top: 60px;
  bottom: 0;
  width: 202px;
  font-size: 13px;
  /* background: url(../../assets/sidebar01.gif) no-repeat; */
}
.sidebar_top {
  display: flex;
}
.sidebar_top>div {
  flex: 1; height: 38px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.sidebar_top .get {
  background-image: url(../../assets/icon.png);
}
.sidebar_top .get:hover {
  background-position: 0 -48px;
}
.sidebar_top .write {
  background-image: url(../../assets/icon.png);
  background-position: -101px 0;
}
.sidebar_top .write:hover {
  background-position: -101px -48px;
}
.list {
  list-style: none;
  width: 100%;
  margin: 15px 0 0;
  padding: 0;
}
.list li {
  height: 32px;
  line-height: 32px;
  text-align: left;
}
.list li:hover {
  background: #B4AFA5;
}
.list li a {
  display: block;
  padding-left: 26px;
  color: #333;
  text-decoration: none;
}
.list li.active a {
  font-weight: 600;
}
.list li a.router-link-active {
  background: #938E83;
  font-weight: 600;
}
</style>